@import "../../sass/etc/mixin";
@import "../../sass/etc/reset";
$main-font-size: 12px;
$font: 12px/2em "Microsoft Yahei", "Arial", "Simhei", "SimSun", "sans-serif";
$text-color: #333;
// base-text-color
$language-btn-bg-color: #f82f3f;
$login-icon-color: #999999;
$active-text-color: #ffffff;
$active-input-border: #c1c1c1;
$footer-color: #666666;
$condition-block-line: #666666;
$bg-color: #fafafa;
$btn-border-width: 1px;
$btn-border-style: solid;
$btn-border-color: #e0e0e0;
//登录按钮
$login-btn-color: #fff;
$login-btn-over-color: #fff;
$login-btn-bg-color: #fd4452;
$login-btn-border-color: #fd4452;
$login-btn-bg-over-color: #ff5865;
$login-btn-border-over-color: #ff5865;
//禁用
$disabled-bg-color: #ddd;
$disabled-border-color: $disabled-bg-color;

html {
    height: 100%;
    font: $font
}

body {
    height: 100%;
    min-height: 768px;
    overflow: auto;
    position: relative;
    color: $text-color
}

.banner {
    height: 42%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px 0 0 30px
}

.login-wrapper {
    width: 300px;
    margin: 0 auto;

    .languange-btn-wrapper {
        text-align: center;
        margin-bottom: 10px;
        line-height: 1em;

        .languange-btn {
            display: inline-block;
            color: $text-color;
            text-decoration: none;
            padding: 0 10px;
            min-width: 54px;
            @include setHeightGroup(20px);
            @include borderRadius(4px);

            &.active {
                background: $language-btn-bg-color;
                color: $active-text-color
            }

        }

    }

}

.login-footer {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-bottom: 20px;
    color: $footer-color;

    .title {
        font-weight: bold
    }

}

.login-form {
    .data-item {
        margin-top: 5px;
        font-size: 0;
        padding: 5px 0;
        line-height: 30px;

        .title {
            font-size: $main-font-size;
            vertical-align: middle
        }

        .text {
            font-size: $main-font-size;
            margin-right: 5px;
            vertical-align: middle
        }

        &.error {
            .input-box {
                border-color: $language-btn-bg-color
            }

        }

    }

    label {
        display: block;
        line-height: 1em;
        margin-bottom: 10px
    }

    .sign-icon {
        display: inline-block;
        width: 35px;
        @include setHeightGroup(32px);
        text-align: center;
        color: $login-icon-color;
        position: absolute
    }

    .input-box {
        font: $font;
        width: 100%;
        @include setHeightGroup(32px, 2px);
        border: $btn-border-width $btn-border-style $btn-border-color;
        @include borderRadius(4px);
        padding-left: 35px;
        background: #fff;
        background-repeat: no-repeat;
        background-position: 10px center;
        vertical-align: top;

        &.verify-code {
            width: 200px
        }

        &:focus {
            border-color: $active-input-border
        }

    }

    .verify-img {
        display: inline-block;
        width: 90px;
        height: 32px;
        background: #ffffff;
        @include borderRadius(4px);
        border: $btn-border-width $btn-border-style $btn-border-color;
        float: right;

        img {
            border: none;
            width: 100%;
            height: 100%
        }

    }

    .login-btn {
        cursor: pointer;
        width: 100%;
        height: 34px;
        line-height: 32px;
        margin-top: 5px;
        color: $login-btn-color;
        background-color: $login-btn-bg-color;
        border: $btn-border-width $btn-border-style $login-btn-border-color;
        @include borderRadius(4px);
        text-align: center;
        outline: none;

        &:hover {
            color: $login-btn-over-color;
            background-color: $login-btn-bg-over-color;
            border-color: $login-btn-border-over-color
        }

        &[disabled] {
            background: $disabled-bg-color;
            border: $btn-border-width $btn-border-style $disabled-border-color;
            cursor: not-allowed;
            color: #999
        }

    }

    .info-wrapper {
        color: $language-btn-bg-color;
        font-size: 0;
        padding-left: 23px;
        visibility: hidden;

        .icon {
            display: inline-block;
            width: 23px;
            vertical-align: middle;
            margin-left: -23px
        }

        .text {
            font-size: $main-font-size;
            vertical-align: middle;
            word-break: break-all
        }

    }

}

//common block style
.condition-block {
    .headline {
        padding: 20px 0 0;
        line-height: 1em;
        text-align: center;
        margin-bottom: 14px;

        &:before {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: $condition-block-line;
            margin-top: 6px
        }

        .text {
            display: inline-block;
            padding: 0 10px;
            position: relative;
            background: $bg-color;
            top: -8px
        }

    }

    .condition-item {
        margin-bottom: 15px
    }

    .condition-entity {
        position: absolute;
        left: 0;
        top: 51px;
        bottom: 0;
        right: 0;
        overflow-x: hidden;
        overflow-y: auto
    }

}

.bold-text {
    font-weight: bold
}

.v-middle:after {
    content: '.';
    font-size: 0;
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
